<template>
	<u-popup
		:closeOnClickOverlay="true"
		@close="submit"
		:show="show"
		round="10px"
		mode="bottom"
	>
		<view class="selectJobPopup">
			<div class="top">
				<div class="title">
					<span class="text">{{ title }}</span>
					<span class="num">已选 {{ activeItem.length }} /{{ max }}</span>
				</div>
				<div class="location_text" @click="submit">确认</div>
			</div>
			<div class="tags" v-if="activeItem.length > 0">
				<text
					class="tag_item"
					@click="deleteItem(index)"
					v-for="(item, index) in activeItem"
					:key="item.name"
				>
					{{ item.name }}
					<text class="close">&times;</text>
				</text>
			</div>
			<div class="content">
				<div class="province_list">
					<div
						class="province_item"
						@click="tap(index)"
						:class="[leftIndex == index && 'active']"
						v-for="(item, index) in jobList"
						:key="index"
					>
						{{ item.name }}
					</div>
				</div>
				<scroll-view
					@scroll="rightScroll"
					scroll-y
					style="height: 70vh"
					scroll-with-animation="true"
					:scroll-into-view="toView"
				>
					<div class="city_list">
						<div class="maodian" v-for="(item, index) in jobList" :key="index">
							<div class="title" :id="'a' + index">{{ item.name }}</div>
							<div class="item_wrap">
								<div
									class="item"
									:class="[activeItem.includes(child) ? 'activeCity' : '']"
									@click="clickItem(child, index2)"
									v-for="(child, index2) in item.children"
									:key="child.name"
								>
									{{ child.name }}
								</div>
							</div>
						</div>
					</div>
				</scroll-view>
			</div>
		</view>
	</u-popup>
</template>

<script>
import joblist from '@/static/json/job.json';
export default {
	name: 'selectJobPopup',
	props: {
		title: {
			type: String,
			default: '请选择求职岗位',
		},
		show: {
			type: Boolean,
			default: false,
		},
		max: {
			type: Number,
			default: 3,
		},
	},
	data() {
		return {
			activeItem: [],
			jobList: joblist,
			toView: 'a0',
			leftIndex: 0,
		};
	},
	computed: {},
	methods: {
		deleteItem(index) {
			console.log(index);
			this.activeItem.splice(index, 1);
		},
		rightScroll(e) {
			let scrollTop = e.detail.scrollTop;
			if (scrollTop > 27 && scrollTop <= 248) {
				this.toView = 'a1';
				this.leftIndex = 1;
			} else if (scrollTop > 248 && scrollTop <= 601) {
				this.toView = 'a2';
				this.leftIndex = 2;
			} else if (scrollTop > 601 && scrollTop < 629) {
				this.toView = 'a3';
				this.leftIndex = 3;
			} else {
				this.toView = 'a0';
				this.leftIndex = 0;
			}
			console.log(scrollTop);
		},
		tap(data) {
			console.log(data);
			this.toView = 'a' + data;
			this.leftIndex = data;
		},
		clickItem(item, index) {
			if (this.activeItem.find((item2) => item2.name == item.name)) {
				if (this.activeItem.length) {
					let Oindex = this.activeItem.findIndex(
						(item1) => item.name == item1.name
					);
					console.log(Oindex);
					if (Oindex != -1) {
						this.activeItem.splice(Oindex, 1); // 存在即删除
					}
				}
				return;
			}
			if (this.activeItem.length < this.max) {
				this.activeItem.push(item);
			} else {
				this.$layer.message('最多选择三个求职岗位！');
			}
		},
		submit() {
			this.$emit('submit', this.activeItem);
		},
	},
	watch: {},

	// 组件周期函数--监听组件挂载完毕
	mounted() {
		console.log(this.jobList);
	},
	// 组件周期函数--监听组件数据更新之前
	beforeUpdate() {},
	// 组件周期函数--监听组件数据更新之后
	updated() {},
	// 组件周期函数--监听组件激活(显示)
	activated() {},
	// 组件周期函数--监听组件停用(隐藏)
	deactivated() {},
	// 组件周期函数--监听组件销毁之前
	beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.selectJobPopup {
	height: 80vh;
	.top {
		width: 90%;
		height: 53px;
		line-height: 53px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		background: #fff;
		font-size: 16px;
		.title {
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			.num {
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-left: 10px;
			}
			.cur_ad {
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				.iconfont {
					font-size: 14px;
					color: #999;
					margin: 0 2px 0 11px;
				}
			}
			.address {
				margin-left: 6px;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ff8822;
			}
		}
		.location_text {
			font-size: 14px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #ff8822;
		}
	}
	.tags {
		line-height: 24px;
		width: 100%;
		box-sizing: border-box;
		padding: 0 16px;
		margin-bottom: 9px;
		.tag_item {
			display: inline-block;
			background: #ffedde;
			border-radius: 4px;
			font-size: 14px;
			color: #ff8822;
			padding: 6px;
			position: relative;
			margin-right: 20px;
			.close {
				position: absolute;
				width: 16px;
				height: 16px;
				font-size: 16px;
				background: #ff8822;
				color: #fff;
				top: -4px;
				right: -8px;
				border-radius: 50%;
				line-height: 14px;
				text-indent: 3px;
			}
		}
	}
	.content {
		width: 100%;
		display: flex;
		.province_list {
			width: 91px;
			height: 40px;
			line-height: 40px;
			height: 619px;
			overflow-y: scroll;
			background: #f7f7f7;
			text-align: center;
			flex-shrink: 0;
		}
		.province_item {
			font-size: 14px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
		}
		.active {
			position: relative;
			background: #fff;
			&::after {
				position: absolute;
				content: '';
				width: 4px;
				height: 13px;
				background: #ff8822;
				border-radius: 0px 0px 0px 0px;
				opacity: 1;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.city_list {
			width: calc(100% - 30px);
			background: #ffffff;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			// overflow: hidden;
			overflow-y: scroll;
			padding: 6px 15px;
			border: 1px solid transparent;
			// overflow-y: scroll;
			// height: 70vh;
			.maodian {
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-bottom: 8px;
				.item_wrap {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-top: 8px;
					.item {
						width: 47%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						height: 32px;
						background: #ffffff;
						border-radius: 4px 4px 4px 4px;
						opacity: 1;
						border: 1px solid #e2e2e2;
						text-align: center;
						line-height: 32px;
						font-size: 14px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 10px;
					}
				}
			}
		}
	}
}
.activeCity {
	background-color: #ff8822 !important;
	color: #fff !important;
}
</style>
